
/*
*  首页**消息通知
* */
var Notification = {
    template:  `<div class="Notification-wrap">
                   <ul class="Notification-ul">
                      <li class="Notification-li" @click="goZan">
                        <span>获赞和收赞</span>
                        <span class="circle"></span>
                      </li>
                      <li class="Notification-li" @click="gopl">
                        <span>评论</span>
                        <span class="circle"></span>
                      </li>
                      <li class="Notification-li" @click="gogz">
                        <span>关注</span>
                        <span class="circle"></span>
                       </li>
                      <li class="Notification-li" @click="goxx">
                        <span>通知消息</span>
                        <span class="circle"></span>
                      </li>
                   </ul>
                </div>`,
    methods:{
        goZan:function () {
            this.$router.push("/notice")
        },
        gopl:function () {
            this.$router.push("/notice")
        },
        gogz:function () {
            this.$router.push("/notice")
        },
        goxx:function () {
            this.$router.push("/system")
        }

    }

}

//获赞。。收赞
var NoticeChild = {
    template:`<div>
                <template v-for="item in arr">
                  <div class="NoticeChild-wrap">
                        <div class="NoticeChildImg">
                           <img :src="item.img" alt="">   
                        </div>
                        <div class="NoticeChild-Com">
                           <p>{{item.name}}</p>
                           <p>{{item.num}}人关注你的图片</p>
                        </div>
                  </div>
                 </template>
              </div>`,
    data(){
        return {
            arr :[
                {
                    img:"./images/flow1.png",
                    name:"图片名称",
                    num:"312"
                },
                {
                    img:"./images/flow1.png",
                    name:"图片名称",
                    num:"312"
                }
            ]
        }
    }
}

//系统消息
var System = {
    template:  `<div class="System-wrap">
                   <ul class="System-ul">
                      <li class="System-li" v-for="(item,index) in arr"  @click="toggleSystem(index)" v-longtap="{fn:vuetouch,index:index}">
                       <div class="System-title">
                          <p>{{item.systemType}}</p>
                          <p>{{item.data}}</p>
                        </div> 
                        <transition name="mysystem"> 
                          <div class="systemCom">{{item.systemCom}}</div>
                        </transition>
                      </li>
                   </ul>
                </div>`,
    data(){
        return {
            arr :[
                {
                    systemType:'获赞和收赞',
                    data:'2018',
                    systemCom:"你的赞上千啦！巴拉巴拉巴拉巴拉巴拉巴拉",
                },
                {
                    systemType:'评论',
                    data:'2017',
                    systemCom:"你的赞上千啦！巴拉巴拉巴拉巴拉巴拉巴拉"
                }
            ],
            showAll:false,
        }
    },
    mounted:function () {

    },

    methods:{
        toggleSystem:function (index) {
            var systemCom = document.getElementsByClassName("systemCom")[index];
            var h = systemCom.getBoundingClientRect().height;
            if(this.showAll){
                console.log("auto");
                systemCom.style.height = "auto";
                this.showAll =!this.showAll;
            }else {
                console.log("0");
                systemCom.style.height = "0";
                this.showAll =!this.showAll;
            }
        },
        //长按删除
        vuetouch:function(s,m){
            var index = s.index
            this.arr.splice(index,1)
        }
    }
}

